// 需要映入插件
// toastr.info('注册成功1')  //信息提示
// toastr.success('注册成功2')  //正确提示
// toastr.warning('注册成功3')  //警告提示
// toastr.error('注册成功4')  //危险提示

// 需求1 显示影藏
let a1 = document.querySelector(".register a");
let a2 = document.querySelector(".login a");
let login = document.querySelector(".login");
let register = document.querySelector(".register");

a2.onclick = function () {
  login.style.display = "none";
  register.style.display = "block";
};

a1.onclick = function () {
  login.style.display = "block";
  register.style.display = "none";
};

//需求2 : 用户名密码校验: 四个input 都要体验,非空和正则
// a 非空  b 正则  c 分装
let inp1 = document.querySelector('.register [name="username"]');
let inp2 = document.querySelector('.register [name="password"]');
let inp3 = document.querySelector('.login [name="username"]');
let inp4 = document.querySelector('.login [name="password"]');

function verifInput(ele, txt1, reg, txt2) {
  // 第一个input绑定事件 - input /keyup
  ele.onkeyup = function () {
    // 非空校验
    if (this.value == "") {
      this.nextElementSibling.style.display = "block";
      this.nextElementSibling.innerHTML = txt1;
      return; // 不通过非空判断,就不进行第二个判断
    } else {
      this.nextElementSibling.style.display = "none";
      this.nextElementSibling.innerHTML = "";
    }
    if (!reg.test(this.value)) {
      // 正则校验,就要影藏span
      this.nextElementSibling.style.display = "block";
      this.nextElementSibling.innerHTML = txt2;
    } else {
      // 没有通过,就要显示span , 设置内容
      this.nextElementSibling.style.display = "none";
      this.nextElementSibling.innerHTML = "";
    }
  };
}
verifInput(inp1, "用户名不能为空", /^\S{2,15}$/, "用户名必须位2~15位之间");
verifInput(inp2, "密码不能为空", /^\S{6,15}$/, "密码必须位6~15位之间");
verifInput(inp3, "用户名不能为空", /^\S{2,15}$/, "用户名必须位2~15位之间");
verifInput(inp4, "密码不能为空", /^\S{6,15}$/, "密码必须位6~15位之间");

// 需求3 注册功能
let form1 = document.querySelector(".register form");
form1.addEventListener("submit", function (e) {
  e.preventDefault();
  axios({
    url: "/api/register",
    method: "post",
    data: {
      username: inp1.value,
      password: inp2.value,
    },

    // 结构函数
  }).then(({ data: res }) => {
    //成功回调
    //  结构原理
    //  let obj = {a:123 , b:456, c:789}
    // let { a:num1 } =obj
    console.log(res);
    // 使用拦截器进行判断
    // 判断状态码是否为1
    // if(res.code==1){
    //   return  toastr.warning(res.message)
    // }
    // 判断状态码是否为0
    if (res.code == 0) {
      toastr.success("恭喜您,注册成功");
      // 清空表单
      form1.reset();
      //  跳转到登录页面
      a1.click(); // 模拟点击a1
    }
  });
});

// 需求4 登录功能
let form2 = document.querySelector(".login form");
form2.addEventListener("submit", function (e) {
  e.preventDefault();
  axios({
    url: "/api/login",
    method: "post",
    data: {
      username: inp3.value,
      password: inp4.value,
    },
  }).then(({ data: res }) => {
    //成功回调
    console.log(res);
    // 使用拦截器进行判断
    // if(res.code==1){
    //   return toastr.warning(res.message)
    // }
    if (res.code == 0) {
      toastr.success("恭喜您,登录成功");
      // 进行首页跳转
      location.href = "./index.html";
      // 保存  token ,后边Ajax使用
      localStorage.setItem("token", res.token);
    }
  });
});
